import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import {
  Table,
  Icon,
  Divider,
  Form,
  Select,
  DatePicker,
  Input,
  Card,
  Tag,
  Avatar,
  Checkbox,
  Rate,
  Progress,
  Button,
  Dropdown,
  Row,
  Col,
  message,
  Modal,
  Collapse,
  List,
  Radio,
  Spin,
} from 'antd';

import ThirdVerify from '../ThirdVerify/ThirdVerify';
import ImageUploader from '../Attachment/ImageUploader';
import ImageDisplayer from '../Attachment/ImageDisplayer';
import CustomerExtendEditor from './CustomerExtendEditor';
import querystring from 'querystring';
import styles from './CustomerListEditor.less';

const Panel = Collapse.Panel;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 19,
  },
};

@connect(({ risk, apply }) => ({
  risk,
  apply,
}))
export default class CustomerListEditor extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      num: '',
      customerEditList: [],
    };
  }

  saveFormRef = formRef => {
    // console.log('handleSubmit', formRef.props.form);
    // this.formRef = formRef;
    this.state.customerEditList.push(formRef);
  };

  renderPanelContent = (item, applyDisabled, i) => {
    const { projectId } = this.props;
    // const { applyListDetails } = apply;

    const projectInfo = {
      projectId,
    };
    return (
      <CustomerExtendEditor
        item={item}
        projectInfo={projectInfo}
        customerId={item.id}
        wrappedComponentRef={this.saveFormRef}
        applyDisabled={applyDisabled}
      />
    );
  };

  handleSaveCustomer = () => {
    let isCustomerFlag = false;
    const customerList = [];
    const { dispatch } = this.props;
    this.state.customerEditList &&
      this.state.customerEditList.map(formRef => {
        // const form = this.formRef.props.form;
        const { validateFieldsAndScroll } = formRef.props.form;
        validateFieldsAndScroll((err, values) => {
          // console.log("customerEditList", values)
          // form.validateFields((err, values) => {
          if (!err) {
            customerList.push(values);
            isCustomerFlag = true;
          } else {
            isCustomerFlag = false;
            return;
          }
        });
      });
    if (isCustomerFlag) {
      dispatch({
        type: 'apply/saveCustomerInfo',
        payload: {
          projectId: this.props.projectId,
          customerList: [...customerList],
        },
        callback: () => {
          const { apply: { applyResult } } = this.props;
          if (applyResult.code == 200) {
            message.success('提交成功');
            dispatch({
              type: 'apply/detailsApply',
              payload: {
                projectId: this.props.projectId,
              },
            });
          } else {
            message.error(applyResult.message);
          }
        },
      });
    }
  };

  render() {
    const { risk } = this.props;
    const { customers } = risk;
    const { apply } = this.props;
    const { projectId } = this.props;
    const { applyDisabled } = this.props;
    const { applyListDetails, applyLoading } = apply;
    // const activeKey = customers.length > 0 ? customers[0].key : null;
    // const activeKey = applyListDetails && applyListDetails.customer.length > 0 ? applyListDetails.customer[0].id : null;
    const header = item => {
      switch (item.relation) {
        case 1:
          return '主贷人';
        case 2:
          return '共同还款人';
        case 3:
          return '担保人';
        case 0:
          return '';
        case '':
          return '';
      }
    };

    return (
      <div>
        {
          // console.log("121311313131",applyListDetails)
        }
        <Collapse bordered={true}>
          {applyListDetails &&
            applyListDetails.customer &&
            applyListDetails.customer.map(item => {
              return (
                <Panel key={item.id} header={header(item)}>
                  {this.renderPanelContent(item, applyDisabled)}
                </Panel>
              );
            })}
        </Collapse>

        <Form>
          <FormItem
            style={{ marginLeft: '30px', marginTop: '30px' }}
            wrapperCol={{ span: 21, offset: 3 }}
            label=""
          >
            {applyDisabled ? (
              ''
            ) : (
              <Button
                type="primary"
                onClick={() => this.handleSaveCustomer()}
                loading={applyLoading}
              >
                保存
              </Button>
            )}
          </FormItem>
        </Form>
      </div>
    );
  }
}
